﻿@inject EmployeeService EmployeeService

<div class="demo-description mw-1100" id="RowPreviewTemplate">
    <h2><DemoNavLink Link="GridTemplate#RowPreviewTemplate" />Data Grid - Row Preview Template</h2>
    <p>
        This demo illustrates how to use the Data Grid’s <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.RowPreviewTemplate">RowPreviewTemplate</a> property to show preview sections under each data row across all columns. These sections can display any content, such as tables, images, values from data source fields, custom text, and so on.
    </p>

</div>

@if (DataSource == null) {
    <p><em>Loading...</em></p>
}
else {
    <DxDataGrid Data="@DataSource"
                VerticalScrollBarMode="ScrollBarMode.Auto"
                VerticalScrollableHeight="400"
                ShowPager="false"
                ShowFilterRow="true"
                CssClass="mw-1100">

        <Columns>
            <DxDataGridColumn Field="@nameof(Employee.FirstName)" SortOrder="DataGridColumnSortOrder.Ascending"></DxDataGridColumn>
            <DxDataGridColumn Field="@nameof(Employee.LastName)"></DxDataGridColumn>
            <DxDataGridColumn Field="@nameof(Employee.Position)" Caption="Position" EditorVisible="@true"></DxDataGridColumn>
            <DxDataGridDateEditColumn Field="@nameof(Employee.BirthDate)" DisplayFormat="D" Caption="Birth Date" EditorVisible="@true"></DxDataGridDateEditColumn>
            <DxDataGridDateEditColumn Field="@nameof(Employee.HireDate)" DisplayFormat="D" Caption="Hire Date" EditorVisible="@true"></DxDataGridDateEditColumn>
        </Columns>
        <RowPreviewTemplate Context="ItemInfo">
            @{
                Employee employee = ItemInfo.DataItem;
                <table cellpadding="5" cellspacing="0">
                    <tbody>
                        <tr>
                            <td rowspan="4" style="border: 0px;">
                                <img src="@(StaticAssetUtils.GetImagePath($"Employees/{employee.FileName}.png"))" width="76" />
                            </td>
                            <td style="border: 0px; white-space: normal; vertical-align:middle;">
                                @employee.Notes
                            </td>
                        </tr>
                    </tbody>
                </table>
            }
        </RowPreviewTemplate>
    </DxDataGrid>

    <CodeSnippet_Grid_RowPreviewTemplate></CodeSnippet_Grid_RowPreviewTemplate>
}

@code {
    IQueryable<Employee> DataSource;

    protected override async Task OnInitializedAsync() {
        DataSource = await EmployeeService.Load();
    }
}
